<template>
  <div style="padding-bottom: 50px;margin-top: 46px;">
		<title-bar :title="'送货清单'" />
    <van-cell-group style="max-height: 100%; overflow-y: auto;">
      <van-cell v-for="item in items" :key="item.key" :title="item.listName" >
        <div slot="title">
          <span @click="onItemDetail(item)">{{item.listName}}</span>
          <div @click="onItemDetail(item)" class="float-r">
              <span class="red">已提货</span>
              <van-icon :name="item.detail.show ? 'arrow-down' : 'arrow'" />
          </div>
          <div v-if="item.detail.show">
            <van-cell-group>
              <van-cell title="配送时间">
                <div class="red">{{item.listCreateTime | dateFormat('YYYY-MM-DD HH:mm')}}</div>
              </van-cell>
              <van-cell title="总计">
                <div class="value_panel"><span>×{{item.productTotal}}</span><span class="yuan"><span>{{item.priceTotal}}</span></span></div>
              </van-cell>
            </van-cell-group>
            <van-cell-group>
              <van-cell v-for="goods in item.detail.productMergeList" :key="goods.productId" :title="goods.productName">
                <div class="value_panel"><span>×{{goods.productTotal}}</span><span class="yuan"><span>{{(goods.price *
                      goods.productTotal).toFixed(2)}}</span></span></div>
              </van-cell>
            </van-cell-group>
            <div class="goods_list" v-for="member in item.detail.memberMergeList" :key="member.mid">
              <van-cell-group>
                <van-cell style="background-color: ghostwhite;">
                  <div class="value_panel" slot="title">
                    <span>{{member.sname}}</span>
                    <span>{{member.mobile}}</span>
                    {{member.picked ? '已提货' : '未提货'}}
                    <van-switch class="switch_btn" :value="member.picked" size="20px" @input="onPickedInput(item, member, $event)"/>
                  </div>
                </van-cell>
                <van-cell v-for="mg in member.memberProducts" :key="mg.productId" :title="mg.productName">
                  <div class="value_panel"><span>×{{mg.productTotal}}</span><span class="yuan"><span>{{(mg.productTotal * mg.price).toFixed(2)}}</span></span></div>
                </van-cell>
              </van-cell-group>
              <van-cell-group>
                <van-cell title="总计">
                  <div class="value_panel"><span>×{{member.productTotal}}</span><span class="yuan"><span>{{memberTotalPrice(member.memberProducts)}}</span></span></div>
                </van-cell>
                <van-cell title="配送时间">
                  <div class="red">{{member.listCreateTime | dateFormat('YYYY-MM-DD HH:mm')}}</div>
                </van-cell>
              </van-cell-group>
            </div>
          </div>
        </div>
      </van-cell>
    </van-cell-group>

    <van-pagination class="page_info" v-model="currentPage" :total-items="total" :items-per-page="perPage"
      force-ellipses @change="onPage"/>
  </div>
</template>
<script>
import { Pagination, Switch } from 'vant';
import { SHOP_PICKUP, SHOP_PICKUP_GOODS, SHOP_PICKUP_CONFIRM } from '@/api/shop';
import TitleBar from '@/vue/components/title-bar/';

export default {
    data() {
        return {
            activeName: 0,
            currentPage: 1,
            perPage: 8,
            total: 0,
            checked: false,
            items: [],
        }
    },

    created() {
        this.onPage(true);
    },

    methods: {
        onItemDetail(active) {
            if (active.detail.show) {
                active.detail.show = false;
                return;
            }

            if (!active.detail.loaded) {
                this.$reqGet(SHOP_PICKUP_GOODS, {listId: active.listId, shopId: this.user.id}).then(res => {
                    let {productMergeList, memberMergeList} = res.data.data;
                    active.detail.productMergeList = productMergeList;
                    active.detail.memberMergeList = memberMergeList;
                    active.detail.loaded = true;
                    active.detail.show = true;
                });
            } else {
                active.detail.show = true;
            }
        },

        memberTotalPrice(goods) {
            let total = 0;
            goods && goods.forEach(item => {
                total += item.productTotal * item.price;
            });

            return total.toFixed(2);
        },

        onPage(init) {
            this.$reqGet(SHOP_PICKUP, {
                shopId: this.user.id, 
                limit: this.perPage, 
                offset: this.perPage * (this.currentPage - 1)
            }).then(res => {
                let {rows, total} = res.data.data;
                this.total = total;
                rows.forEach(item => {
                    item.key = item.listId;//要更新key，自组件才会更新
                    item.detail = {
                        show: false,
                        loaded: false,
                    }
                })

                this.items = rows;
                if (total > 0) {
                    this.onItemDetail(this.items[0]);
                    
                    if (!init) {
                        ++this.currentPage;
                    }
                }
            });
        },

        onPickedInput(item, member, checked) {
            if (member.picked) {
                this.$toast.fail('不能撤销提货');
                return;
            }

            this.$dialog.confirm({
                title: '提醒',
                message: '是否确认提货，确认后不可撤销？'
            }).then(() => {
                this.$reqPost(SHOP_PICKUP_CONFIRM, {
                    listId: item.listId, 
                    shopId: this.user.id, 
                    memberId: member.mid
                }, {hideLoading: true}).then(res => {
                    member.picked = checked;
                    this.items[0].key = Date.now();
                });
            });        
        }
    },

    components: {
        [Pagination.name]: Pagination,
        [Switch.name]: Switch,
				[TitleBar.name]: TitleBar
    }
}
</script>
<style lang="scss" scoped>
.value_panel {
    display: flex;
    >span {
        flex: 1;
    }
}
.yuan {
    color: $red;
    ::before {
        content: '¥';
        margin-right: 3px;
        font-size: 8px;
    }
}
.page_info {
    position: fixed;
    bottom: 0;
    width: 100%;
}
.switch_btn {
    margin-left: 10px;
}
.goods_list {
    margin: 10px 0;
}
</style>

